<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div>{{ items }}</div>
    <!-- <div>{{ list }}</div> -->

    <div class="buttons">
      <el-input size="small"></el-input>
      <el-button type="danger">按钮</el-button>
      <el-button plain @click="dialogVisible = true"> Click to open the Dialog </el-button>
      <el-button :plain="true" @click="open">Show message</el-button>
      <div>
        <el-checkbox v-model="checked1" label="Option 1" size="large" />
        <el-checkbox v-model="checked2" label="Option 2" size="large" />
      </div>
    </div>

    <el-dialog v-model="dialogVisible" title="Tips" width="500" :before-close="handleClose">
      <span>This is a message</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="danger" @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="dialogVisible = false"> Confirm </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
// import { ElMessageBox, ElMessage } from 'element-plus'
// import { ElMessage } from 'element-plus';
// import { ref } from 'vue'

// 定义数组时，推荐使用 [] 字面量，而不是构造函数
// const list = new Array()
// list.push({ a: 1 })
const items = []
const checked1 = ref(true)
const checked2 = ref(false)

const dialogVisible = ref(false)

const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
const open = () => {
  ElMessage('This is a message.')
}
</script>

<style>
@media (width >= 1024px) {
  .about {
    display: flex;
    align-items: center;
    min-height: 100vh;
  }
}

.buttons {
  display: flex;
  flex-direction: column;
}
</style>
